<template>
    <div class="container">
        <header>
            <div class="title">
                确认订单
            </div>
        </header>
        <!-- delivery-info -->
        <div class="delivery-info">
            <h5>订单配送至：</h5>
            <div class="delivery-address" @click="toUserAddress"> 
                <p>{{delivery.address}}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <p class="user-info">{{delivery.contactName}}&nbsp;&nbsp;{{delivery.contactTel}}</p>
        </div>
        <!-- 商家标题 -->
        <h3 class="business-title">
            {{business.businessName}}
        </h3>

        <ul class="order-detail">
            <li v-for="(cart,index) in cartlist" :key="index">
                <div class="left">
                    <img :src="cart.food.foodImg" alt="">
                    <p>{{cart.food.foodName}} x {{cart.quantity}}</p>
                </div>
                <p class="right">&#165;{{cart.food.foodPrice*cart.quantity}}</p>
            </li>
        </ul>
        <div class="delivery-price">
            <p>配送费</p>
            <p>&#165;{{business.deliveryPrice}}</p>
        </div>

        <!-- 撑住页脚处文档流 -->
        <div style="width: 100%;height :14vw;"></div>
        <!-- 页脚 -->
        <footer>
            <div class="left">
                    <p>&#165;{{allPrice}}</p>
            </div>
            <div class="right" @click="toPayment">
                去支付
            </div>
            <!-- <div class="right" style="background-color: #535356;">
                &#165;15元起送
            </div> -->
        </footer>
    </div>
</template>

<script>
export default {
    name:'Order',
    data () {
        return {
            businessId:this.$route.query.businessId,   
            business:{},
            cartlist:[],
            delivery:{},
            user:{}
        }
    },
    methods:{
        toPayment(){
        this.$axios
        .post(
          "/OrdersController/createOrders",
          this.$qs.stringify({
            'userId': this.user.userId,
            'businessId': this.businessId,
            'orderTotal': this.allPrice,
            'daId': this.delivery.daId,
          })
        )
        .then(response => {
            let orderId = response.data
          if (orderId!= 0) {
            //去支付页
            this.$router.push({path:'/payment',query:{'orderId':orderId}});
          } else{
            alert("订单生成失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
        },
        toUserAddress(){
            //跳转到用户配送信息页
            this.$router.push({path:'/useraddress',query:{'businessId':this.businessId}});
        }
    },
    computed:{
        allPrice() {
            let sum = 0;
            for (let i = 0; i < this.cartlist.length; i++) {
                sum += this.cartlist[i].quantity * this.cartlist[i].food.foodPrice;
            }
            return sum + this.business.deliveryPrice;
        }
    },
    created () {
        let user = this.$getSessionStorage('user');
        this.user = user
        let deliveryInfo = this.$getLocalStorage(user.userId);
        if (deliveryInfo != null) {
            this.delivery = deliveryInfo
        }else{
            this.delivery.address = "请选择配送费地址"
        }

        //根据商家id获取商家信息
        this.$axios
        .get("/BusinessController/getBusinessById?businessId=" + this.businessId)
        .then(response => {
            this.business = response.data;
        })
        .catch(error => {
            console.log(error);
        });
        //根据用户id和商家id获取购物车列表
        this.$axios
        .get("/CartController/listCart?userId=" +user.userId + "&businessId=" +this.businessId)
        .then(response => {
          this.cartlist = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    
}
</script>

<style scoped>
/* *********************** header 部分 ***************************** */
.container header{
    width: 100%;
    height: 12vw;
}
.container header .title{
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 4.8vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
/* *********************** delivery-info 部分 ***************************** */
.container .delivery-info{
    width: 100%;
    background-color: #0097ff;
    box-sizing: border-box;
    padding: 2vw;
    color: white;
}
.container .delivery-info h5{
    font-size: 3vw;
    font-weight: 300;
}
.container .delivery-info .delivery-address{
    font-weight: bold;
    margin: 1vw 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.container .delivery-info .delivery-address p{
    font-size: 5vw;
}
.container .delivery-info .delivery-address i{
    font-size: 6vw;
}
.container .delivery-info .user-info{
    font-size: 3vw;
}
/* *********************** 商家标题 部分 ***************************** */
.container .business-title{
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: 1px solid #ddd;
}
.container .order-detail{
    width: 100%;
    
}
.container .order-detail li{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}
.container .order-detail li .left{
    display: flex;
    align-items: center;
}
.container .order-detail li .left img{
    width: 10vw;
    height: 10vw;
}
.container .order-detail li .left p{
    font-size: 3.5vw;
    margin-left: 3vw;
}
.container .order-detail li .right{
    font-size: 3.5vw;
}
.container .delivery-price{
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    font-size: 3.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}
/* *********************** 页脚 部分 ***************************** */
.container footer{
    width: 100%;
    height: 14vw;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
}
.container footer .left{
    height: 100%;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #505051;
    font-size: 4.5vw;
    font-weight: bold;
}
.container footer .right{
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: #38CA73;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 4.5vw;
    cursor: pointer;
}
</style>